<template>
  <div class="change-pwd">
    <a-card title="重置密码">
       <a-form  ref="formRef"
          :rules="rules"  :model="formState" @finish="onSearch" >
          <a-form-item  label="原密码" ref="oldPwd" name="oldPwd"  :style="{ width: '18.75rem' }">
            <a-input v-model:value="formState.oldPwd" placeholder="输入原密码">
            </a-input>
          </a-form-item >
            <a-form-item label="新密码" ref="newPwd" name="newPwd"  :style="{ width: '18.75rem' }" >
            <a-input v-model:value="formState.newPwd" placeholder="输入新密码">
            </a-input>
          </a-form-item>

          <a-form-item>
            <a-button type="primary" html-type="submit">
             重置
            </a-button>

          </a-form-item>
        </a-form>
    </a-card>
  </div>
</template>
<script lang="ts">
import { restPwd } from '@/api'
import { message } from 'ant-design-vue'
import { defineComponent, reactive, ref, UnwrapRef } from 'vue'
import { useRouter } from 'vue-router'
interface FormState {
  oldPwd: string ;
  newPwd: string
}
export default defineComponent({
  setup () {
    const router = useRouter()
    const formRef = ref()
    const formState: UnwrapRef<FormState> = reactive({
      oldPwd: '',
      newPwd: ''
    })
    const rules = {
      oldPwd: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
      newPwd: [{ required: true, message: '请输入新密码', trigger: 'blur' }]
    }
    //
    const onSearch = () => {
      formRef.value.validate().then(() => {
        restPwd({ newPassword: formState.newPwd, oldPassword: formState.oldPwd }).then(res => {
          const {
            data: { status, msg }
          } = res
          if (status === 200) {
            message.success(msg)
            setTimeout(() => {
              router.push('/auth')
            }, 2000)
          } else {
            message.error(msg)
          }
        })
      })
    }
    return {
      formState,
      rules,
      formRef,
      onSearch

    }
  }
})
</script>
